<template>
	<view class="page-body">
		<image class="bg" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/bg33.png" mode=""></image>
		<view class="move-area">
			<view v-if="!isHide" class="move-box" style="transform-origin:center;" @touchmove="itemMove"
				@touchstart="itemtouch" @touchend="itemend"
				:style="{transform: 'translate(' + itemX + 'px, ' + itemY +'px) rotate('+tmpRotate+'deg) scale('+tmpScale+')'}">
				<!-- <view class="opt-icon del-icon" :style="{transform: 'scale(' + (1 / tmpScale) + ')'}"
					@touchstart="startMode(2)">

				</view> -->
				<view class="changeImg">
					换图
				</view>
				<view class="opt-icon edit-icon" :style="{transform: 'scale(' + (1 / tmpScale) + ')'}"
					@touchstart="startMode(1)">
					<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/x1.png" mode=""></image>
				</view>
				<view class="opt-icon del-icon" :style="{transform: 'scale(' + (1 / tmpScale) + ')'}"
					@touchstart="startMode(3)">
					<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/x2.png" mode=""></image>
				</view>
				<view class="move-body" @touchstart="startMode(0)">这是内容</view>
			</view>
		</view>
	</view>
</template>

<script>
	const nearDg = 7; // 用于控制当近似垂直或水平时，视为垂直或水平的容差。  
	let lastX = 0,
		lastY = 0;
	export default {
		data() {
			return {
				itemX: 0,
				itemY: 0,
				realCenterX: 0,
				realCenterY: 0,
				halfWidth: 75, // px  
				halfHeight: 75, // px  
				realWidth: 0,
				realHeight: 0,
				offset: 12.5, // px  
				touchMode: 0, // 0移动  1缩放  2删除  3   旋转
				startX: 0,
				startY: 0,
				startAngle: 0,
				startDist: 0,
				tmpRotate: 0,
				initRotate: 0,
				tmpScale: 1,
				initScale: 1,
				isHide: false,
			}
		},
		onLoad: function() {
			this.itemX = 70;
			this.itemY = 100;
		},
		mounted: function() {
			let view = uni.createSelectorQuery().in(this).select(".move-box");
			view.boundingClientRect(data => {
				this.realWidth = data.width;
				this.realHeight = data.height;
				this.realCenterX = data.right - data.width / 2;
				this.realCenterY = data.bottom - data.height / 2;
			}).exec();
		},
		methods: {
			itemMove: function(e) {
				console.log(this.touchMode, 777777777);
				let curX = e.touches[0].clientX;
				let curY = e.touches[0].clientY;
				if (this.touchMode === 0) {
					this.itemX += curX - lastX;
					this.itemY += curY - lastY;
					this.realCenterX += curX - lastX;
					this.realCenterY += curY - lastY;
					lastX = curX;
					lastY = curY;
				}
				// if(this.touchMode !== 1)return; 


				let angle = this.angle(this.realCenterX, this.realCenterY, curX, curY);
				console.log(angle, 33333333333);

				if (this.touchMode == 1) { //1缩放  

					if (this.startAngle === 0) {
						this.startX = curX;
						this.startY = curY;
						this.startAngle = angle;
						this.startDist = Math.hypot(this.startX - this.realCenterX, this.startY - this.realCenterY);
					} else {

						let rotate = this.initRotate + Math.round(angle - this.startAngle);
						let leftDg = Math.abs(rotate % 90);
						if (leftDg < nearDg || 90 - leftDg < nearDg) {
							rotate = Math.round(rotate / 90) * 90;
						}
						// this.tmpRotate = rotate;  
						let curDist = Math.hypot(curX - this.realCenterX, curY - this.realCenterY);
						this.tmpScale = this.initScale * curDist / this.startDist;
					}

				} else if (this.touchMode == 3) { // 3   旋转

					console.log(444);

					// if(this.startAngle === 0 ){
					//     this.startX = curX;  
					//     this.startY = curY;  
					//     this.startAngle = angle;  
					//     this.startDist = Math.hypot(this.startX - this.realCenterX, this.startY - this.realCenterY);  
					// }  
					// else{  

					let rotate = this.initRotate + Math.round(angle - this.startAngle);
					let leftDg = Math.abs(rotate % 90);
					if (leftDg < nearDg || 90 - leftDg < nearDg) {
						rotate = Math.round(rotate / 90) * 90;
					}
					this.tmpRotate = rotate;
					let curDist = Math.hypot(curX - this.realCenterX, curY - this.realCenterY);
					// this.tmpScale = this.initScale * curDist / this.startDist;  
					// }  

				}
				//            if(this.startAngle === 0 ){  
				//                this.startX = curX;  
				//                this.startY = curY;  
				//                this.startAngle = angle;  
				//                this.startDist = Math.hypot(this.startX - this.realCenterX, this.startY - this.realCenterY);  
				//            }  
				//            else{  

				//                let rotate = this.initRotate + Math.round(angle - this.startAngle);  
				//                let leftDg = Math.abs(rotate % 90);  
				//                if(leftDg < nearDg || 90 - leftDg < nearDg){  
				//                    rotate = Math.round(rotate / 90) * 90;  
				//                }  
				//                this.tmpRotate = rotate;  
				//                let curDist = Math.hypot(curX - this.realCenterX, curY - this.realCenterY);  
				//                this.tmpScale = this.initScale * curDist / this.startDist;  
				//            }  
			},
			itemtouch: function(e) {
				lastX = e.touches[0].clientX;
				lastY = e.touches[0].clientY;
			},
			itemend: function(e) {
				this.startAngle = 0;
				this.initRotate = this.tmpRotate;
				this.initScale = this.tmpScale;
			},
			startMode: function(mode) {
				this.touchMode = mode;
				if (this.touchMode === 2) {
					this.isHide = true;
				}
			},
			angle: function(cx, cy, ex, ey) {
				var dy = ey - cy;
				var dx = ex - cx;
				var theta = Math.atan2(dy, dx); // range (-PI, PI]  
				theta *= 180 / Math.PI; // rads to degs, range (-180, 180]  
				if (theta < 0) theta = 360 + theta; // range [0, 360)  
				return theta;
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		position: absolute;
		width: 100vw;
		height: 100vh;
	}

	.page-body {
		// padding: 5px;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.changeImg {
		position: absolute;
		width: 87rpx;
		height: 49rpx;
		background: #16AC51;
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 29rpx;
		right: -10rpx;
	}

	.move-area {
		width: 365px;
		height: 500px;
	}

	.move-box {
		position: relative;
		width: 175px;
		height: 175px;
		padding: 1px;
	}

	.opt-icon {
		position: absolute;
		width: 49rpx;
		height: 49rpx;
		border-radius: 50%;

		image {
			width: 49rpx;
			height: 49rpx;
		}
	}

	.del-icon {
		background-color: red;
		left: 0;
		top: 0;
	}

	.edit-icon {

		right: 0;
		bottom: 0;
	}

	.scale-icon {

		right: 0;
		top: 0;
	}

	.move-body {
		margin: 12.5px;
		width: 150px;
		height: 150px;
		border: 2px solid green;
	}
</style>
